<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8 no-js">      <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9 no-js">           <![endif]-->
<!--[if gt IE 9]>  <html class="no-js">                       <![endif]-->
<!--[if !IE]><!--> <html class="no-js">                       <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>ELITE - A Powerfull Responsive Admin Theme</title>
    
	<!-- 
    ***************************************
    DEMO - DEMO - DEMO - DEMO - DEMO - DEMO
    
    This demo is modifyed to perfom 
    better(as our servers anr't that fast)
    Most cusom files are compressed and 
    are not readable.
    ***************************************
    -->
    
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.html">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/mobile/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/mobile/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon-precomposed" href="images/mobile/apple-touch-icon.png" />
    <link rel="shortcut icon" href="images/apple-touch-icon.html" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-320x460.png" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-640x920-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="images/mobile/splash-768x1004.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="images/mobile/splash-1024x748.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 1536px) and (orientation: portrait)" href="images/mobile/splash-1536x2008-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 2048px) and (orientation: landscape)" href="images/mobile/splash-2048x1496-retina.png" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="true"/>   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <script src="js/mobiledevices.js"></script>

    <meta name="application-name" content="Elite Admin Skin">
    <meta name="msapplication-tooltip" content="Cross-platform admin skin.">
    <meta name="msapplication-starturl" content="http://themes.creativemilk.net/elite/html/index.html">
    <meta name="msapplication-task" content="name=Home;action-uri=http://themes.creativemilk.net/elite/html/index.html;icon-uri=http://themes.creativemilk.net/elite/html/images/favicons/favicon.ico">
    <meta http-equiv="cleartype" content="on" /> 
    
    <!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="css/framework.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/ui/jquery.ui.base.css"/>
    <link rel="stylesheet" href="css/theme/darkblue.css" id="themesheet"/>
	<!--[if IE 7]>
	<link rel="stylesheet" href="css/destroy-ie6-ie7.css"/>
    <![endif]-->
    
    <link rel="shortcut icon" href="images/favicons/favicon.ico" />

    <script src="../../ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
    <script src="../../code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
    <script>!window.jQueryUI && document.write('<script src="js/jquery-ui-1.8.22.min.js"><\/script>')</script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
	<script src="js/jquery.ui.spinner.js"></script>            
    <script src="js/tipsy.js"></script>                       
    <script src="js/treeview.js"></script>                      
    <script src="js/fullcalendar.min.js"></script>               
    <script src="js/selectToUISlider.jQuery.js"></script>       
    <script src="js/jquery.contextMenu.js"></script>            
    <script src="js/elfinder.min.js"></script>                  
    <script src="js/autogrow-textarea.js"></script>              
    <script src="js/textarearesizer.min.js"></script>
    <script src="wysiwyghtml5/parser_rules/advanced.js"></script>
	<script src="wysiwyghtml5/dist/wysihtml5-0.3.0.js"></script>                    
    <script src="js/jquery.colorbox-min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/jquery.maskedinput-1.3.min.js"></script> 
    <script src="js/json2.js"></script>
    <script src="audiojs/audiojs/audio.min.js"></script> 
    <script src="js/e_styleswitcher.1.0.min.js"></script>                 
    <script src="js/main.js"></script>    
    <script src="js/modernizr.min.js"></script>
                
</head>
<body class="layout_fluid layout_responsive"> 

    <!-- this part can be removed, its just here 
         to let you switch between styles and layout sizes -->
    <div id="e-styleswitcher">
        <div class="e-styleswitcher-inner">
            <div class="e-styleswitcher-arrow"><img src="images/icons/plix-16/white/arrow-right-16.png" alt="" /></div>
            <div class="box">
            	<h4>Styles</h4>
                <select id="choose-styling">
                	<option value="strangeblue">Strange blue</option>
                    <option value="black">Black</option>
                    <option value="darkblue">Dark blue</option>
                    <option value="lightgrey">Light grey</option>
                </select>
            </div>    
            <div class="box">
            	<h4>Layout sizes</h4>                
                <select id="set-layout-size">
                	<option value="layout_fluid">fluid</option>
                    <option value="layout_768">768</option>
                    <option value="layout_960">960</option>
                    <option value="layout_1024">1024</option>
                    <option value="layout_1200">1200</option>
                    <option value="layout_1600">1600</option>
                </select>
            </div> 
            <div class="box">
            	<h4>Responsive</h4>                
                <select id="set-layout-responsive">
                	<option value="layout_responsive">yes</option>
                    <option value="">no</option>
                </select>
            </div>
            <div class="box">
            	<h4>Get theme</h4>                
                <select id="get-theme">
                	<option value="">no</option>
                    <option value="yes">yes</option>
                </select>
            </div>                         
        </div>
    </div>
  
	<div id="container">
    
        <!-- MAIN HEADER -->
                
        <header id="header">
        	<div id="header-border">
                <div id="header-inner">
                
                    <div class="left">
                        <a href="index.html" id="logo">ELITE</a>
                    </div><!-- End .left -->
                    
                    <div class="right">
                        <!-- eMenu -->
                        <nav>
                            <ul class="e-splitmenu" id="header-menu">
                                <li><span>Menu</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="stats2-10 plix-10"></span> Stats</a></li>
                                            <li><a href="index.html"><span class="lock-10 plix-10"></span> Security</a></li>
                                            <li><a href="index.html"><span class="download-10 plix-10"></span> Downloads</a></li>
                                        </ul>                                      
                                    </div>                               

                                </li>
                                <li><span>Settings</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="home-10 plix-10"></span> Basic Settings</a></li>
                                            <li><a href="index.html"><span class="settings-10 plix-10"></span> Site Settings</a></li>
                                            <li><a href="index.html"><span class="comment-10 plix-10"></span> User Settings</a></li>
                                            <li><a href="index.html"><span class="bookmark-10 plix-10"></span> Server Settings</a></li>
                                        </ul>                                      
                                    </div>
                                    
                                </li>
                        		<li class="e-menu-profile">
                                    <a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a> 
                                    <img src="images/avatar.jpg" alt=""/>
                                    
                                    <div>
                                        <ul>
                                            <li><a href="index.html"><span class="mail-10 plix-10"></span> Inbox</a></li>
                                            <li><a href="index.html"><span class="upload-10 plix-10"></span> Settings</a></li>
                                            <li><a href="index.html"><span class="info-10 plix-10"></span> Logout</a></li>
                                        </ul>                                      
                                    </div> 
                                            
                                </li>
                            </ul>
                        </nav>
                    </div><!-- End .right --> 
                    
                </div><!-- End #header-border --> 
            </div><!-- End #header-inner -->  
                
		</header><!-- End #header -->
        
        <div id="shadow-top"></div>

        <!-- CONTENT -->
                 
        <div id="content">
            <div id="content-border">
            
                <!-- CONTENT HEADER -->
                
                <header id="content-header">
                    <div class="left">
                    	<a href="javascript:void(0);" id="toggle-mainmenu" class="button-icon tip-s" title="Toggle Main Menu"><span class="arrow-up-10 plix-10"></span></a>
                        
                        <!-- main search form -->
                        <form method="post" id="mainsearch">
                            <input type="text" placeholder="Live search..." name="" autocomplete="off"/>
                            <input type="submit" value="" />
                        </form>
                    </div><!-- End .left --> 
                    <div class="right">
                    	<!-- sidebar switch -->
                    	<a href="javascript:void(0);" id="toggle-sidebar" class="button-icon tip-s" title="Switch Main Menu"><span class="arrow-left-10 plix-10"></span></a>
                        
                        <!-- breadcrumbs -->
                        <nav id="main-breadcrumbs">
                            <ul>
                                <li class="bc-tab-first">
                                    <a href="index.html">Home</a>
                                </li>
                                <li>
                                    <a href="documentation.html">Documentation</a>
                                </li>
                                <li class="bc-tab-last">List &amp; Blocks</li>
                            </ul>          
                        </nav>
                        
                        <!-- demo dialog button -->
                        <a href="javascript:void(0);" id="open-main-dialog" class="button-text-icon tip-w" title="Some tooltip pointing right"><span class="fullscreen-10 plix-10"></span> Dialog</a>
                        
                        <!-- the main page dialog -->
                        <div id="main-page-dialog" title="Welcome to Elite" style="display:none">
                        <img src="images/jquery-ui-logo.png" alt="" class="dummy-img-dialog"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet est et mauris ornare lobortis dignissim quis massa. Donec ullamcorper turpis ac lectus semper commodo. Mauris tincidunt, erat et tempor interdum, dolor metus consectetur dui, eu accumsan augue augue a erat. Fusce justo nibh, tristique vitae pretium ut, venenatis nec felis. Curabitur congue tempor ultricies. Proin quis libero dignissim neque posuere pharetra vel adipiscing massa. Sed sit amet erat ac arcu sodales aliquam. Nam tellus sapien, ornare in tincidunt vel, ultricies id quam.
						</div>
                        
                        <!-- widgets controls -->
                        <div id="widgets-controls">
							<ul class="e-splitmenu" id="page-actions">
                                <li><span>Actions</span><a href="javascript:void(0);"><span class="settings-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="pencil-10 plix-10"></span>Edit</a></li>
                                            <li><a href="index.html"><span class="document-10 plix-10"></span>View</a></li>
                                            <li><a href="index.html"><span class="trashcan-10 plix-10"></span> Delete</a></li>
                                        </ul>                                      
                                    </div>                               

                                </li>
                        	</ul>                        
                        </div>                    
                    </div><!-- End .right -->                
                
				</header><!-- End #content-header --> 
                                
                <div id="content-inner">
                    
                    <!-- SIDEBAR -->
                    
                    <aside>
                    
                    	<!-- SIDEBAR PROFILE -->
                        
                    	<div id="sidebar-profile">
                            <div id="main-avatar">
                            	<span class="indicator">38</span>
                                <img src="images/avatar.jpg" alt=""/>
                            </div>
                            <div id="profile-info">
                                <div>
                                    <a href="javascript:void(0);"><b>Administrator</b></a>
                                    <a href="javascript:void(0);">Profile settings</a>
                                    <a href="javascript:void(0);">Server settings</a>
                                    <a href="javascript:void(0);">Logout</a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- MAIN MENU -->
                        
                        <nav id="main-menu">
                            <ul>
                                <li><a href="index.html"><span class="home-16 plix-16"></span> Dashboard</a></li>
                                <li class="page-active menu-open no-mobile"><a href="documentation.html"><span class="note-16 plix-16"></span> Documentation</a>
                                
                                    <ul><li><a href="doc-accordion.html">Accordion</a></li> 
                                    	<li><a href="doc-breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="doc-buttons.html">Buttons</a></li>
                                        <li><a href="doc-calendar.html">Calendar</a></li>
                                        <li><a href="doc-charts.html">Charts</a></li>
                                        <li><a href="doc-dialogs.html">Dialogs</a></li>
                                        <li><a href="doc-editors.html">Editors</a></li>
                                        <li><a href="doc-extra.html">Extra</a></li>
                                        <li><a href="doc-fileexplore.html">File Explore</a></li>
                                        <li><a href="doc-forms.html">Forms</a></li>
                                        <li><a href="doc-grid.html">Grid</a></li>
                                        <li><a href="doc-icons.html">Icons</a></li>
                                        <li class="page-active"><a href="doc-listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="doc-media.html">Media</a></li>
                                        <li><a href="doc-menus.html">Menus</a></li>
                                        <li><a href="doc-misc.html">Misc</a></li>
                                        <li><a href="doc-search.html">Search</a></li>
                                        <li><a href="doc-tables.html">Tables</a></li>
                                        <li><a href="doc-tabs.html">Tabs</a></li>
                                        <li><a href="doc-toolbars.html">Toolbars</a></li> 
                                        <li><a href="doc-widgets.html">Widgets</a></li>                                         
                                    </ul> 
                                                                   
                                </li>
                                <li><a href="calendar.html"><span class="calendar-16 plix-16"></span>Calendar<span class="color-indicator">28</span></a></li>
                                <li><a href="javascript:void(0);"><span class="postcard-16 plix-16"></span> Form Elements <span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="editors.html">Editors</a></li>
                                    	<li><a href="forms.html">Forms</a></li>
                                        <li><a href="login.html">Login form 1</a></li>
                                        <li><a href="login-2.html">Login form 2</a></li>
                                        <li><a href="login-3.html">Login form 3</a></li>
                                        <li><a href="login-4.html">Login form 4</a></li>
                                        <li><a href="search.html">Search</a></li>
                                        <li><a href="wizard.html">Wizard</a></li>                                         
                                    </ul>
                                
                                </li>
                                <li><a href="media.html"><span class="image-16 plix-16"></span> Media</a></li>
                                <li><a href="planning.html"><span class="pencil-16 plix-16"></span> Planning</a></li>
                                <li><a href="maps.html"><span class="map-16 plix-16"></span> Google Maps <span class="indicator tip-w" title="Some tip goes here">tooltip</span></a></li>
                                <li><a href="fileexplore.html"><span class="folder-16 plix-16"></span> File Explore</a></li> 
                                <li><a href="javascript:void(0);"><span class="warning-16 plix-16"></span> Error pages<span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="400.html">400</a></li>
                                    	<li><a href="401.html">401</a></li>
                                        <li><a href="403.html">403</a></li>
                                        <li><a href="404.html">404</a></li>
                                        <li><a href="500.html">500</a></li>
                                        <li><a href="503.html">503</a></li>                                         
                                    </ul>
                                
                                </li>                                                               
                                <li><a href="widgets.html"><span class="rows4-16 plix-16"></span> Widgets</a></li>
                                <li><a href="tables.html"><span class="cells-16 plix-16"></span> Tables</a></li>
                                <li><a href="charts.html"><span class="stats2-16 plix-16"></span> Charts </a></li>
                                <li><a href="javascript:void(0);"><span class="controls-16 plix-16"></span> Interface Elements <span class="button-icon"><span class="plus-10 plix-10"></span></span></a>
                                
                                    <ul>
                                    	<li><a href="accordion.html">Accordion</a></li>                                        
                                        <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="buttons.html">Buttons</a></li>
                                        <li><a href="dialogs.html">Dialogs</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="menus.html">Menus</a></li>
                                        <li><a href="misc.html">Misc</a></li>
                                        <li><a href="tabs.html">Tabs</a></li>
                                        <li><a href="toolbars.html">Toolbars</a></li>
                                    </ul>           
                                                           
                                </li>
                                <li><a href="grid.html"><span class="layout3-16 plix-16"></span> Grid <span class="indicator">960</span></a></li>
                            </ul>
                        </nav>                      
                    </aside>
                    
                    <!-- sidebar meta stats -->
                    <div id="sidebar-meta">
                    	<div id="sidebar-meta-inner">
                        	<div>
                                <p class="left">Space</p> 
                                <p class="right">4,551 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:50%"></span>                            
                            </div>
                        	<div>
                                <p class="left">Traffic</p> 
                                <p class="right">8,001 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:81%"></span>                            
                            </div>
                        </div>  
                    </div> 
                     
                    <!-- CONTENT -->
                    
					<div id="content-main">
                        <div id="content-main-inner">

                            <div class="page-header">
                                <h2>Lists &amp; Blocks</h2>
                                <span class="page-helper">1.0</span>
                                <a href="listsblocks.html" class="page-helper">Examples</a>
                                <p>Documentations about lists and blocks.</p>
                            </div> 
                                                     
                            <!-- Start grid -->
                            
                            <section class="g_1">
                                <div class="doc-wrap" id="doc-tabs">
                                
                                    <ul class="etabs">
                                        <li class="etabs-active"><a href="#etab1">Lists</a></li>
                                        <li><a href="#etab2">Blocks</a></li>
                                        <li><a href="#etab3">Third-party</a></li>
                                    </ul>
                                    
                                    <div id="etab1" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>Lists</h3>                                            
                                            <p>List elements.</p>
                                        </div>  
                                                                           
                                        <div class="section-header">
                                            <h3>Stats list</h3>
                                            <p>Basic stats list.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;ul class="stats-list"&gt;
    &lt;li class="stats-up"&gt;
        &lt;a href="javascript:void(0);"&gt;
            &lt;h3&gt;Total Visits&lt;/h3&gt;
            &lt;span&gt;8382&lt;/span&gt;
        &lt;/a&gt;
    &lt;/li&gt;
    ...
    ...
    ...
&lt;/ul&gt;</pre>
										</div>

                                        <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>
                                                                                                                                            
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>stats-list</td>
                                                    <td>ul</td>
                                                    <td>Main stats list class.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>stats-up</td>
                                                    <td>li</td>
                                                    <td>Used for the color green.</td>
                                                    <td>1.0</td>
                                                </tr>                                                
                                                <tr>
                                                    <td>stats-eq</td>
                                                    <td>li</td>
                                                    <td>Used for the color orange.</td>
                                                    <td>1.0</td>
                                                </tr>  
                                                <tr>
                                                    <td>stats-down</td>
                                                    <td>li</td>
                                                    <td>Used for the color red.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                                       
                                            </tbody>
                                        </table>                                        

                                        <div class="section-header">
                                            <h3>Draggable list</h3>
                                            <p>Basic list which is draggable.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;ul class="basic-list sortable-list"&gt;
  &lt;li&gt;
      &lt;span class="handle"&gt;&lt;/span&gt;
      Sortable List item 1
  &lt;/li&gt;
  ...
  ...
  ...
&lt;/ul&gt;</pre>
										</div>
                                        
                                        <div class="section-header">
                                            <h3>Info list</h3>
                                            <p>Basic information list.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;ul class="info-list"&gt;
  &lt;li&gt;
      &lt;div class="total"&gt;Total&lt;/div&gt;
      &lt;div class="desc"&gt;Description&lt;/div&gt;
      &lt;div class="sum"&gt;Changes&lt;/div&gt;
  &lt;/li&gt;                                                 
  ...
  ...
  ...
&lt;/ul&gt;</pre>
										</div>                                        

                                        <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>
                                                                                                                                            
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>info-list</td>
                                                    <td>ul</td>
                                                    <td>Main info list class.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>total</td>
                                                    <td>div</td>
                                                    <td>Class for a total cell. This column has a fixed width.</td>
                                                    <td>1.0</td>
                                                </tr>                                                
                                                <tr>
                                                    <td>desc</td>
                                                    <td>div</td>
                                                    <td>Class for a description.</td>
                                                    <td>1.0</td>
                                                </tr>  
                                                <tr>
                                                    <td>sum</td>
                                                    <td>div</td>
                                                    <td>Class for a summary cell. This column has a fixed width.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                  
                                            </tbody>
                                        </table>
                                        
                                        <div class="section-header">
                                            <h3>User list</h3>
                                            <p>Simple user list.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;ul class="user-list"&gt;
    &lt;li&gt;
        &lt;div class="thumb"&gt;&lt;img src="images/avatar.jpg" alt=""/&gt;&lt;/div&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;h3&gt;James Jacksons&lt;/h3&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;b&gt;Function:&lt;/b&gt; Senior developer at Apple
            &lt;/li&gt; 
            &lt;li&gt;
                &lt;b&gt;Phone:&lt;/b&gt; +0800 00 00 00
            &lt;/li&gt;                                                    
        &lt;/ul&gt; 
        &lt;div class="ctrls"&gt;
            &lt;a href="javascript:void(0);" class="button-icon"&gt;
                &lt;span class="phone-10 plix-10"&gt;&lt;/span&gt;
            &lt;/a&gt;                                                        
            &lt;a href="javascript:void(0);" class="button-icon"&gt;
                &lt;span class="pencil-10 plix-10"&gt;&lt;/span&gt;
            &lt;/a&gt; 
            &lt;a href="javascript:void(0);" class="button-icon"&gt;
                &lt;span class="mail-10 plix-10"&gt;&lt;/span&gt;
            &lt;/a&gt; 
            &lt;a href="javascript:void(0);" class="button-icon"&gt;
                &lt;span class="delete-10 plix-10"&gt;&lt;/span&gt;
            &lt;/a&gt;                                                                                                                 
        &lt;/div&gt;                                                                                               
    &lt;/li&gt;
    ...
    ...
    ...
&lt;/ul&gt;</pre>
										</div>  

                                        <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>
                                                                                                                                            
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>user-list</td>
                                                    <td>ul</td>
                                                    <td>Main user list class.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>thumb</td>
                                                    <td>div</td>
                                                    <td>Class for a thumbnail.</td>
                                                    <td>1.0</td>
                                                </tr>                                                
                                                <tr>
                                                    <td>ctrls</td>
                                                    <td>div</td>
                                                    <td>Class for a couple of icon buttons.</td>
                                                    <td>1.0</td>
                                                </tr>  
                                                <tr>
                                                    <td>button-icon</td>
                                                    <td>a</td>
                                                    <td>Pixel icons. More about the buttons can be found <a href="buttons.html">here</a>.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>phone-10, pencil-10, mail-10, delete-10</td>
                                                    <td>span</td>
                                                    <td>Pixel icons. More about the icons can be found <a href="icons.html">here</a>.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>plix-10</td>
                                                    <td>span</td>
                                                    <td>Custom icon size class.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                               
                                            </tbody>
                                        </table>
      								</div><!-- End tab --> 
                                    
 									<div id="etab2" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>Blocks</h3>
                                            <p>Block elements..</p>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Icon block &amp; bar</h3>
                                            <p>Icon blocks which you can use for submenus. Icons can be found <a href="icons.html">here</a>.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;ul class="icon-block"&gt;
    &lt;li&gt;
        &lt;a href="javascript:void(0);"&gt;
        	&lt;span class="home-32 plix-32"&gt;&lt;/span&gt;
            &lt;span&gt;Dashboard&lt;/span&gt;     
        &lt;/a&gt;
    &lt;/li&gt;
    ...
    ...
    ...
&lt;div class="info-bar"&gt;
put your blocks here
&lt;/div&gt;</pre>
										</div>

                                        <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>icon-block</td>
                                                    <td>div</td>
                                                    <td>Main icon block class.</td>
                                                    <td>1.0</td>
                                                </tr>                                            
                                                <tr>
                                                    <td>info-bar</td>
                                                    <td>div</td>
                                                    <td>Main wrapper class to display the blocks in a bar.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>home-32</td>
                                                    <td>span</td>
                                                    <td>Custom made icon class. More about the icons can be found <a href="icons.html">here</a>.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>plix-10</td>
                                                    <td>span</td>
                                                    <td>Custom icon size class.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                               
                                            </tbody>
                                        </table>

                                        <div class="section-header">
                                            <h3>Info block &amp; bar</h3>
                                            <p>Info blocks which you can wrap into a bar.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;div class="info-block"&gt;
    &lt;a href="javascript:void(0);"&gt;
        &lt;span&gt;30&lt;/span&gt;
        &lt;span&gt;Tickets&lt;/span&gt;
    &lt;/a&gt;
&lt;/div&gt;
    ...
    ...
    ...
&lt;div class="info-bar"&gt;
put your blocks here
&lt;/div&gt;</pre>
										</div> 

                                        <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>info-block</td>
                                                    <td>div</td>
                                                    <td>Main info block class.</td>
                                                    <td>1.0</td>
                                                </tr>                                            
                                                <tr>
                                                    <td>info-bar</td>
                                                    <td>div</td>
                                                    <td>Main wrapper class to display the blocks in a bar.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                               
                                            </tbody>
                                        </table>
                                        
                                        <div class="section-header">
                                            <h3>Icon text block</h3>
                                            <p>A big icon with a title and subtitle.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;div class="icon-text-block"&gt;
    &lt;a href="javascript:void(0);"&gt;
        &lt;div&gt;
            &lt;span class="home-32 plix-32"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;h3&gt;Dashboard&lt;/h3&gt;
            &lt;span&gt;Lorem ipsum dolor&lt;/span&gt;
        &lt;/div&gt;
    &lt;/a&gt;
&lt;/div&gt;</pre>
										</div>

                                        <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>icon-text-block</td>
                                                    <td>div</td>
                                                    <td>Main icon text block class.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>home-32</td>
                                                    <td>span</td>
                                                    <td>Custom made icon class. More about the icons can be found <a href="icons.html">here</a>.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>plix-10</td>
                                                    <td>span</td>
                                                    <td>Custom icon size class.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                               
                                            </tbody>
                                        </table>
                                        
                                        <div class="section-header">
                                            <h3>Combi tags</h3>
                                            <p>Tags with a checkbox in it.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode"> &lt;div class="split-tag"&gt;
    &lt;a href="javascript:void(0);"&gt;Adobe&lt;/a&gt;
    &lt;div&gt;
        &lt;input type="checkbox" name=""/&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
										</div>  

                                       <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>spilt-tag</td>
                                                    <td>div</td>
                                                    <td>Main split/combi tag class.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                             
                                            </tbody>
                                        </table>
                                                                                
                                        <div class="section-header">
                                            <h3>Basic tags</h3>
                                            <p>Basic tags with colors.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;a href="javascript:void(0);" class="tag red"&gt;Compleet&lt;/a&gt;</pre>
										</div>
                                        
                                        <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>

                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>tag</td>
                                                    <td>a</td>
                                                    <td>Main tag class.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>green, blue, purple, red, orange, pink, darkblue</td>
                                                    <td>a</td>
                                                    <td>Custom color classes.</td>
                                                    <td>1.0</td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <div class="section-header">
                                            <h3>Contacts</h3>
                                            <p>Contact blocks.</p>
                                        </div>
    
                                        <div class="spacer-15"><!-- spacer 15px --></div>
    
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                           
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;div class="contact-box"&gt;
    &lt;header&gt;
        &lt;img src="images/avatar.jpg" alt=""/&gt;
        &lt;h3&gt;Mike longhorn&lt;/h3&gt;
        &lt;p&gt;Support&lt;/p&gt;
        &lt;p&gt;mail@yourserver.com&lt;/p&gt;
    &lt;/header&gt;
    &lt;div class="contact-sum"&gt;
	&lt;-- hidden content --&gt;
    &lt;/div&gt;
    &lt;footer&gt;
        &lt;a href="javascript:void(0);" class="tip-s" title="Visit contact"&gt;&lt;span class="home-10 plix-10"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;a href="javascript:void(0);" class="tip-s" title="Mail contact"&gt;&lt;span class="mail-10 plix-10"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;a href="javascript:void(0);" class="tip-s" title="Edit contacts"&gt;&lt;span class="pencil-10 plix-10"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;a href="javascript:void(0);" class="tip-s" title="Delete contact"&gt;&lt;span class="trashcan-10 plix-10"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;a href="javascript:void(0);" class="tip-s contact-toggle" title="Toggle box"&gt;&lt;span class="plus-10 plix-10"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;/footer&gt;
&lt;/div&gt;</pre>
										</div>
                                        
                                        <div class="section-header">
                                            <h3>Usage classes</h3>
                                            <p>Defined classes related to a piece of code or plugin.</p>
                                        </div>

                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Available class</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>contact-box</td>
                                                    <td>div</td>
                                                    <td>Main contact class.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>contact-sum</td>
                                                    <td>div</td>
                                                    <td>Hidden content class.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>tip-s</td>
                                                    <td>a</td>
                                                    <td>Tooltip class.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>home-10, mail-10, pencil-10, trashcan-10, plus-10</td>
                                                    <td>span</td>
                                                    <td>Icon class.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>plix-10</td>
                                                    <td>span</td>
                                                    <td>Icon siize class.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                 
                                                <tr>
                                                    <td>contact-toggle</td>
                                                    <td>a</td>
                                                    <td>Hidden content trigger class.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                 
                                            </tbody>
                                        </table>                                        
                                    </div><!-- End tab --> 
                                    
                                    <div id="etab3" class="etabs-content"> 
                                        <div class="doc-intro">
                                            <h3>Third-party plugins</h3>
                                            <p>Third-party plugins are not documented here because they have there own documentation.</p>
                                        </div> 
                                                                                                       
                                        <div class="section-header">
                                            <h3>TreeView</h3>
                                            <p>A powerfull jQuery tree view plugin.</p>
                                        </div> 

                                        <div class="tp-wrapper">
                                        This is a third party plugin, for information about how to use this plugin and examples please visit 
                                        <a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">this site</a>.
                                        </div>
                                    </div><!-- End tab -->
                            	</div>
                            </section>
                            
                            <div class="clear"><!-- New row --></div> 
                                                                                                                                           
                            <!-- End grid -->
                                                   
                       </div><!-- End #content-main-inner --> 
                    </div><!-- End #content-main --> 
                </div><!-- End #content-inner --> 
                
                <!-- CONTENT FOOTER -->
                
                <footer id="content-footer">
                    <div class="left">
						<div class="left">
                               <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="folder-10 plix-10"></span>
                              </a>                                                        
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="pencil-10 plix-10"></span>
                              </a>
                          </div><!-- End .left -->
                          <div class="right">
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="refresh-10 plix-10"></span>
                              </a> 
                          </div> <!-- End .right --> 
                    </div><!-- End .left --> 
                    <div class="right">
                    	<div class="left">
                    	Copyright © 2012 <a href="http://bit.ly/ldjfWQ">CreativeMilk</a>
                        </div><!-- End .left -->
                        <div class="right">
                        	<div class="theme-version">Version 1.0</div>
                        </div><!-- End .right -->
                    </div><!-- End .right -->                
                </footer><!-- End #content-footer -->                 
            </div><!-- End #content-border --> 
        </div><!-- End #content --> 
            
    </div><!-- End #container -->
    
    <!-- scroll to top link -->
    <div id="scrolltotop"><span></span></div> 
    
</body>
</html>